import { useState, useEffect } from 'react'
import { connect } from 'umi';
import TaskPage from './TaskPage'
import TaskDetail from './TaskDetail'


const ProjectTask = (props) => {
    const {
        projectId,
        routeParam,
        projectPermission,
        queryInitParams,
        dispatch
    } = props

    if (routeParam.tab !== 'task') {
        return <></>;
    }

    if (routeParam.itemId) {
        return <TaskDetail projectId={projectId} projectPermission={projectPermission} taskId={routeParam.itemId}></TaskDetail>
    }

    const onQueryParamChange = (params) => {
        dispatch({
            type: 'queryParams/saveQueryParams',
            payload: {
                name: "taskPage",
                params: params
            }
        });
    }
    return <>
        <TaskPage projectId={projectId} projectPermission={projectPermission} queryInitParams={queryInitParams} onQueryParamChange={onQueryParamChange}></TaskPage>
    </>
}


export default connect(({ queryParams }) => ({
    queryInitParams: queryParams.taskPage,
}))(ProjectTask);